<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_猜数字练习</title>
</head>
<body>
    <h4>已生成一个1~100的随机数: </h4>
    <input type="text" placeholder="请输入你猜的数字!">
    <button onclick="guess()">点我验证</button>
    <h4>小提示: <span></span></h4>
    <script>
        //1.随机数
        //Math.random()生成的是[0,1)之间的随机小数
        //[0,100)+1=[1,101)=>[1,100]
        let n = parseInt(Math.random()*100)+1;
        console.log('我是后台:'+n);
        //6.定义一个变量用来统计猜的次数
        var count = 0;
        //2.定义猜数字的方法
        function guess(){
            //3.拿到用户猜的数字
            let num = document.querySelector('input').value;
            //8.对接收的数据做合法性的正则校验
            //一对正斜杠(/)用来包裹正则表达式
            //^表示开头,$表示结尾,\d表示数字+表示至少出现一次
            //.test(参数) 用来判断是否匹配前面的正则表达式,匹配返回true,不匹配返回false
            if(!/^\d+$/.test(num)){
                alert('请输入数字!');
                return;
            }
            //4.获取用来显示结果的span元素
            let spanE = document.querySelector('span');
            //7.每猜一次,统计的次数+1
            count++;
            //5.拿着用户猜的数字与随机数做比较
            if(num>n){
                spanE.innerHTML = '猜大了';
            }else if(num<n){
                spanE.innerHTML = '猜小了';
            }else{
                spanE.innerHTML = '恭喜你用了'+count+'次猜对了!'
            }
        }
    </script>
</body>
</html>